<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport"
          content="width=device-width,height=device-height,maximum-scale=1.0,user-scalable=no">
    <title>摇一摇拔河</title>
    <style type="text/css">
        canvas{
            float: left;
            width: 40%;
            height: 250px;
        }

        canvas#cvs_left{
            margin-left: 7%;
        }

        canvas#cvs_right{
        }

        .tip_count{
            margin-left: 30%;
            font-weight: bold;
            color: black;
        }
    </style>
</head>
<body>

    <div align="center" >
        <img id="bg" src="../img/bg_team_formation.png" style="width: 100%;height: 35em"/>

    </div>

    <div  style="position: absolute;margin-top: -25em; width: 100%;">
        <!--当前两边队伍人数的分布-->
        <span id="tip_left" class="tip_count">55</span>
        <span id="tip_right" class="tip_count">55</span>
        <div>
            <canvas id="cvs_left" ></canvas>
            <canvas id="cvs_right"></canvas>
        </div>
         <div align="center" id="btn_join" style="position: relative; margin-right: 7.5em; margin-top: 18em; ">
             <img src="../img/join_in.png" style="width: 7em"/>
         </div>
    </div>



</body>
<script src="../js/jquery-1.9.1.min.js"></script>
<script src="../js/canvas.js"></script>

<script>
    var isLeft = true;
    $("#btn_join").click(function (){
        if(isLeft){
            $("#btn_join").css("margin-left", "7.5em");
            $("#btn_join").css("margin-right", "0em");
            isLeft = false;
        }else{
            $("#btn_join").css("margin-right", "7.5em");
            $("#btn_join").css("margin-left", "0em");

            isLeft = true;
        }
    });

    /**
     * @percent      高度的百分比
     * @direction "left"为左边的进度条， “right”为右边
     * */
    function drawProgress(percent, direction){
        var canvas;
        var ctx;
        var color;
        if("left" == direction){
            canvas  = document.getElementById("cvs_left");
            color = "blue";
        }else if("right" == direction){
            canvas  = document.getElementById("cvs_right");
            color = "limegreen";
        }
        ctx  = canvas.getContext("2d");
        bar = new progressbar(ctx, color, 0, 0);
        bar.height = BAR_HEIGHT * percent;
        drawRect(bar, ctx, canvas);
    }
    //偷懒得假定进度条为屏幕的0.1长度
    const BAR_HEIGHT =  35 * 16 * 0.25;

    drawProgress(1, "left");
    drawProgress(1, "right");

</script>

</html>